<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link href='https://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='font/woff'>
		<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='font/woff'>
		<link href='https://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='font/woff'>
		<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='font/woff'>
		<style type="text/css">
			body{background:#FFF url(https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/body_bg.png) repeat-x center fixed;background-position:0 30%;margin:0;padding:0}
			#content{background:transparent url(https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/bg_long.png) repeat-x center fixed;width:100%;height:100%;display:table;margin:auto;padding:0 0 20px}
			#left{width:40%;float:left;display:table-row;height:620px;text-align:center;margin:0 0 0 10%}
			#download{margin-top:70px;text-align:left}
			#dl-label{font-family:'Carrois Gothic';text-align:left;text-transform:uppercase;font-size:30px;vertical-align:middle;margin-right:20px}
			ul.simple-gallery{list-style:none;display:table;width:100%;margin:0;padding:0}
			ul.simple-gallery li{display:table-cell;text-align:center;width:246px}
			img.dl-icon{cursor:pointer}
			#right{width:40%;float:right;display:table-row;height:620px;background-color:rgba(255,255,255,0.75);margin:0 10% 0 0}
			#images{display:table;width:100%;height:380px;vertical-align:middle;margin-top:40px}
			#right h1{font-size:50px;font-family:'Carrois Gothic SC';color:#333;margin-bottom:0}
			#header-icon{vertical-align:middle;height:60px;width:auto;padding:0 10px}
			p.caption{color:#777;font-family:"Open Sans";text-transform:lowercase;margin-top:0;padding-left:80px}
			ul.nav-bar{list-style:none;border-bottom:thin solid #777;text-align:right}
			li.nav-item{display:inline;padding:0 10px}
			li.nav-item:hover{border-bottom:thick solid #777}
			a.nav-link{font-family:'Carrois Gothic SC';text-transform:uppercase;color:#777;text-decoration:none}
			li.selected{border-bottom:thick solid #333}
			li.selected a{color:#333}
			div.content-item{color:#555;font-family:'Carrois Gothic';margin-top:30px;display:none}
			div.content-item p{text-align:justify;margin:10px 20px}
			div.content-item p:first-letter{margin-left:30px}
			ul.list{list-style:none;display:table;margin-top:0;padding:0}
			div.content-item h3{text-transform:uppercase;font-family:Oswald;padding-left:20px;background-color:#FE8A28;color:#FFF;width:200px;border-bottom-right-radius:2px;border-top-right-radius:2px}
			div.content-item h4{text-transform:uppercase;padding-left:20px;font-weight:700;color:#777}
			ul.list p{text-align:justify}
			#partners-list{width:80%;text-align:center;padding-top:20px;margin:0 10%}
			#partners-list td{width:50%}
			#partners-list img{max-height:80px;width:auto;display:inline}
			#the-team table{text-align:left;margin:0 10%}
			#the-team table td.label{font-weight:700;text-transform:uppercase;padding-right:20px;vertical-align:top}
			.highlighted{color:#FE8A28}
			#footer{width:100%;text-align:center;color:#777;font-size:x-small;font-family:'Open Sans';display:table-row}
			.highlighted:before,.highlighted:after{content:'"'}
		</style>
		<title>Arko PH</title>
	</head>
	<body>
		<div id="content">
			<div id="left">
				<div id="download">
					<label id="dl-label">Download</label>
					<a href="https://itunes.apple.com/us/app/arko/id630391516?mt=8" target="_blank"><img class="dl-icon" align="center" title="Download at iTunes" src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/itunes.png" width="50px" height="auto"/></a>
					<a href="https://play.google.com/store/apps/details?id=com.pointwest.arko&hl=en" target="_blank"><img class="dl-icon" align="center" title="Download at Google Play" src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/gplay.png" width="40px" height="auto"/></a>
				</div>
				<div id="images">
					<ul class="simple-gallery">
						<li>
							<img id="ios_splash" src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/ios_splash.png" align="center" width="auto" height="365px"/>
							<img id="ios_home" style="display: none;" src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/ios_home.png" align="center" width="auto" height="365px"/>
						</li>
						<li>
							<img id="and_home" src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/and_home.png" align="center" width="auto" height="365px"/>
							<img id="and_splash" style="display: none;" src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/and_splash.png" align="center" width="auto" height="365px"/>
						</li>
					</ul>
				</div>
			</div>
			<div id="right">
				<h1><img src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/arko_icon.png" id="header-icon"/>Arko PH</h1>
				<p class="caption">
					Flood and weather adviser for the Philippines.
				</p>
				<ul class="nav-bar">
					<li class="nav-item selected">
						<a href="#what-is-arko" class="nav-link">What is Arko?</a>
					</li>
					<li class="nav-item">
						<a href="#features" class="nav-link">Features</a>
					</li>
					<li class="nav-item">
						<a href="#partners" class="nav-link">Partners</a>
					</li>
					<li class="nav-item">
						<a href="#the-team" class="nav-link">The Team</a>
					</li>
				</ul>
				<div class="content-item selected-content" id="what-is-arko">
					<h3>Why make Arko?</h3>
					<p>
						The Philippines is hit by an average of twenty typhoons a year. Most of the time, these cause
						major flooding that can be a danger to one’s life and livelihood. Lives have been lost due to
						storm flooding because people didn’t know what path to take to safety or even if their area would
						be hit by a flood-causing downpour.
					</p>
					<p>
						Arko hopes to address the need of every Filipino to more information during times of major rains
						and flooding. By accessing the extensive databases of Project NOAH and DOST, Arko can give the
						user up-to-the-minute updates on rainfall and other weather conditions near you or wherever you choose.
					</p>
				</div>
				<div class="content-item" id="features">
					<h3>Arko provides...</h3>
					<ul class="list">
						<li>
							<h4>Flood Mapping</h4>
							<p>
								Using data from previous floods (like Ondoy), Arko will show you which areas
								are prone to flooding so you can avoid them, or designate a safe zone where evacuees can go
								to during floods.
							</p>
						</li>
						<li>
							<h4>Remote Monitoring</h4>
							<p>
								Arko can allow you to check on how flooding and/or rainfall is in other
								areas. Perfect for those who worry if a family member, loved one or friend is doing fine
								despite the weather.
							</p>
						</li>
						<li>
							<h4>Weather Advisory</h4>
							<p>
								By connecting with Project NOAH, PAGASA and DOST's various weather monitoring
								facilities, Arko can give you updates on the weather. It can even give you a good estimate on
								whether it will rain or not, based on the data it gets.
							</p>
						</li>
					</ul>
				</div>
				<div class="content-item" id="partners">
					<h3>Contributors</h3>
					<table id="partners-list">
						<tr>
							<td><a href="http://dost.gov.ph/"><img src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/logo_dost.jpg" /></a></td>
							<td><a href="http://www.pagasa.dost.gov.ph/"><img src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/logo_pagasa.png" /></a></td>
						</tr>
						<tr>
							<td>DOST</td>
							<td>PAGASA</td>
						</tr>
						<tr>
							<td><a href="http://noah.dost.gov.ph/"><img src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/logo_noah.png" /></a></td>
							<td><a href="http://www.pointwest.com.ph/"><img src="https://sites.google.com/a/pointwest.com.ph/sandbox/file-cabinet/logo_ptc.png" /></a></td>
						</tr>
						<tr>
							<td>Project NOAH</td>
							<td>Pointwest Technologies</td>
						</tr>
					</table>
				</div>
				<div class="content-item" id="the-team">
					<h3>The Team</h3>
					<h4>Pointwest Technologies</h4>
					<table>
						<tbody>
							<tr>
								<td class="label">Project Manager</td>
								<td>Gerald <fon class="highlighted">Ge</fon> Divinagracia</td>
							</tr>
							<tr>
								<td class="label">Technical Lead</td>
								<td>John Joseph <font class="highlighted">JJ</font> Aguado</td>
							</tr>
							<tr>
								<td class="label" rowspan="5">Android Developers</td>
							</tr>
							<tr>
								<td>Raymond <font class="highlighted">Mon</font> Balingit</td>
							</tr>
							<tr>
								<td><font class="highlighted">Joan</font> Antonnette Bautista</td>
							</tr>
							<tr>
								<td>John Christian Vincent <font class="highlighted">Jarder</font></td>
							</tr>
							<tr>
								<td>John Louis <font class="highlighted">JL</font> Perez</td>
							</tr>
							<tr>
								<td class="label" rowspan="4">iOS Developers</td>
							</tr>
							<tr>
								<td>John Paul <font class="highlighted">Pope</font> Abella</td>
							</tr>
							<tr>
								<td>Leilani <font class="highlighted">Lei</font> Montas</td>
							</tr>
							<tr>
								<td>Elbert Philip <font class="highlighted">Epoy</font> Yagaya</td>
							</tr>
							<tr>
								<td class="label">Web Developer</td>
								<td>Mark <font class="highlighted">Arvin</font> Badiola</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="footer">
				Copyright 2013
			</div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://ptc-mad-team-beta-site.googlecode.com/svn/trunk/arko/js/main.js"></script>
	</body>
</html>
